<template>
	<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
		点击我 -> 这个按钮通过简单组合几个类就实现了背景色、悬停效果、字体样式、内边距和圆角等完整样式
	</button>

	<h4>适用于需要独特设计风格的项目，避免使用预定义组件带来的限制。例如创建一个完全自定义的卡片组件：</h4>
	<div
		class="max-w-sm rounded overflow-hidden shadow-lg transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1">
		<img class="w-full" :src="cardsPng" alt="卡片图片">
		<div class="px-6 py-4">
			<div class="font-bold text-xl mb-2">交互式卡片</div>
			<p class="text-gray-700 text-base">
				这是一个使用 Tailwind CSS 实现的交互式卡片示例。实现了悬停时轻微上浮和阴影增强的交互效果
			</p>
		</div>
	</div>

	<div class="min-h-screen bg-gray-100 p-8">
		<h1 class="text-4xl font-bold text-blue-600 mb-4">
			Hello
		</h1>
		<button class="px-4 py-2 bg-green-500 text-white rounded-full">Save Changes</button>
		<button @click="count++" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">
			Count is: {{ count }}
		</button>
	</div>
</template>

<script setup>
	import cardsPng from '../assets/404_images/404.png'
	import {
		ref
	} from 'vue'

	const count = ref(0)
</script>

<style scoped>
	/* // 集成 tailwind 后生成的css */
	@import '../output.css'
</style>